<template>
  <div id="search-container" class="search-container">
    <div class="child-container" :class="isOpen?'':'hide'">
      <slot />
    </div>
    <div class="change-btn">
      <img :src="isOpen?closeImg:openImg" @click="changeClass">
    </div>
    <div v-if="empty" class="empty-panel" />
  </div>
</template>

<script>
import closeImg from '@/assets/page/close.png'
import openImg from '@/assets/page/open.png'
export default {
  name: 'SearchPanelCompontent',
  props: {
    empty: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      isOpen: true,
      closeImg: closeImg,
      openImg: openImg
    }
  },
  methods: {
    changeClass() {
      this.isOpen = !this.isOpen
      this.$nextTick(() => {
        const h = document.getElementById('search-container').offsetHeight
        this.$emit('changeHeight', h)
      })
    },
    getHeight() {
      return document.getElementById('search-container').offsetHeight
    }
  }
}
</script>

<style lang="scss" scoped>
.search-container{

  transition:height 0.5s;
  -webkit-transition: height 0.5s;
  .child-container{
    padding: 20px 20px 0px 20px;
    transition:height 0.5s;
    -webkit-transition: height 0.5s;
    height: auto;
    overflow: hidden;
    &.hide{
      height: 0px;
      padding-top: 0px;
    }
  }
}
.change-btn{
  height: 12px;
  text-align: center;
  img{
    cursor: pointer;
  }
}
.empty-panel{
  background: #F0F0F0;
  height: 20px;
}
</style>
